<template>
  <div class="navbar-custom-menu">
    <ul class="nav navbar-nav">
      <!-- Messages: style can be found in dropdown.less-->
      <!--<li class="dropdown messages-menu">-->
        <!--<a href="#" class="dropdown-toggle" data-toggle="dropdown">-->
          <!--<i class="fa fa-envelope-o"></i>-->
          <!--<span class="label label-success">4</span>-->
        <!--</a>-->
        <!--<ul class="dropdown-menu">-->
          <!--<li class="header">You have 4 messages</li>-->
          <!--<li>-->
            <!--&lt;!&ndash; inner menu: contains the actual data &ndash;&gt;-->
            <!--<ul class="menu">-->
              <!--<li>&lt;!&ndash; start message &ndash;&gt;-->
                <!--<a href="#">-->
                  <!--<div class="pull-left">-->
                    <!--<img src="@/assets/dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">-->
                  <!--</div>-->
                  <!--<h4>-->
                    <!--Support Team-->
                    <!--<small><i class="fa fa-clock-o"></i> 5 mins</small>-->
                  <!--</h4>-->
                  <!--<p>Why not buy a new awesome theme?</p>-->
                <!--</a>-->
              <!--</li>-->
              <!--&lt;!&ndash; end message &ndash;&gt;-->
              <!--<li>-->
                <!--<a href="#">-->
                  <!--<div class="pull-left">-->
                    <!--<img src="@/assets/dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">-->
                  <!--</div>-->
                  <!--<h4>-->
                    <!--AdminLTE Design Team-->
                    <!--<small><i class="fa fa-clock-o"></i> 2 hours</small>-->
                  <!--</h4>-->
                  <!--<p>Why not buy a new awesome theme?</p>-->
                <!--</a>-->
              <!--</li>-->
              <!--<li>-->
                <!--<a href="#">-->
                  <!--<div class="pull-left">-->
                    <!--<img src="@/assets/dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">-->
                  <!--</div>-->
                  <!--<h4>-->
                    <!--Developers-->
                    <!--<small><i class="fa fa-clock-o"></i> Today</small>-->
                  <!--</h4>-->
                  <!--<p>Why not buy a new awesome theme?</p>-->
                <!--</a>-->
              <!--</li>-->
              <!--<li>-->
                <!--<a href="#">-->
                  <!--<div class="pull-left">-->
                    <!--<img src="@/assets/dist/img/user3-128x128.jpg" class="img-circle" alt="User Image">-->
                  <!--</div>-->
                  <!--<h4>-->
                    <!--Sales Department-->
                    <!--<small><i class="fa fa-clock-o"></i> Yesterday</small>-->
                  <!--</h4>-->
                  <!--<p>Why not buy a new awesome theme?</p>-->
                <!--</a>-->
              <!--</li>-->
              <!--<li>-->
                <!--<a href="#">-->
                  <!--<div class="pull-left">-->
                    <!--<img src="@/assets/dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">-->
                  <!--</div>-->
                  <!--<h4>-->
                    <!--Reviewers-->
                    <!--<small><i class="fa fa-clock-o"></i> 2 days</small>-->
                  <!--</h4>-->
                  <!--<p>Why not buy a new awesome theme?</p>-->
                <!--</a>-->
              <!--</li>-->
            <!--</ul>-->
          <!--</li>-->
          <!--<li class="footer"><a href="#">See All Messages</a></li>-->
        <!--</ul>-->
      <!--</li>-->
      <!-- Notifications: style can be found in dropdown.less -->
      <!--<li class="dropdown notifications-menu">-->
        <!--<a href="#" class="dropdown-toggle" data-toggle="dropdown">-->
          <!--<i class="fa fa-bell-o"></i>-->
          <!--<span class="label label-warning">10</span>-->
        <!--</a>-->
        <!--<ul class="dropdown-menu">-->
          <!--<li class="header">You have 10 notifications</li>-->
          <!--<li>-->
            <!--&lt;!&ndash; inner menu: contains the actual data &ndash;&gt;-->
            <!--<ul class="menu">-->
              <!--<li>-->
                <!--<a href="#">-->
                  <!--<i class="fa fa-users text-aqua"></i> 5 new members joined today-->
                <!--</a>-->
              <!--</li>-->
              <!--<li>-->
                <!--<a href="#">-->
                  <!--<i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the-->
                  <!--page and may cause design problems-->
                <!--</a>-->
              <!--</li>-->
              <!--<li>-->
                <!--<a href="#">-->
                  <!--<i class="fa fa-users text-red"></i> 5 new members joined-->
                <!--</a>-->
              <!--</li>-->
              <!--<li>-->
                <!--<a href="#">-->
                  <!--<i class="fa fa-shopping-cart text-green"></i> 25 sales made-->
                <!--</a>-->
              <!--</li>-->
              <!--<li>-->
                <!--<a href="#">-->
                  <!--<i class="fa fa-user text-red"></i> You changed your username-->
                <!--</a>-->
              <!--</li>-->
            <!--</ul>-->
          <!--</li>-->
          <!--<li class="footer"><a href="#">View all</a></li>-->
        <!--</ul>-->
      <!--</li>-->
      <!-- Tasks: style can be found in dropdown.less -->
      <!--<li class="dropdown tasks-menu">-->
        <!--<a href="#" class="dropdown-toggle" data-toggle="dropdown">-->
          <!--<i class="fa fa-flag-o"></i>-->
          <!--<span class="label label-danger">9</span>-->
        <!--</a>-->
        <!--<ul class="dropdown-menu">-->
          <!--<li class="header">You have 9 tasks</li>-->
          <!--<li>-->
            <!--&lt;!&ndash; inner menu: contains the actual data &ndash;&gt;-->
            <!--<ul class="menu">-->
              <!--<li>&lt;!&ndash; Task item &ndash;&gt;-->
                <!--<a href="#">-->
                  <!--<h3>-->
                    <!--Design some buttons-->
                    <!--<small class="pull-right">20%</small>-->
                  <!--</h3>-->
                  <!--<div class="progress xs">-->
                    <!--<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20"-->
                         <!--aria-valuemin="0" aria-valuemax="100">-->
                      <!--<span class="sr-only">20% Complete</span>-->
                    <!--</div>-->
                  <!--</div>-->
                <!--</a>-->
              <!--</li>-->
              <!--&lt;!&ndash; end task item &ndash;&gt;-->
              <!--<li>&lt;!&ndash; Task item &ndash;&gt;-->
                <!--<a href="#">-->
                  <!--<h3>-->
                    <!--Create a nice theme-->
                    <!--<small class="pull-right">40%</small>-->
                  <!--</h3>-->
                  <!--<div class="progress xs">-->
                    <!--<div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar"-->
                         <!--aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">-->
                      <!--<span class="sr-only">40% Complete</span>-->
                    <!--</div>-->
                  <!--</div>-->
                <!--</a>-->
              <!--</li>-->
              <!--&lt;!&ndash; end task item &ndash;&gt;-->
              <!--<li>&lt;!&ndash; Task item &ndash;&gt;-->
                <!--<a href="#">-->
                  <!--<h3>-->
                    <!--Some task I need to do-->
                    <!--<small class="pull-right">60%</small>-->
                  <!--</h3>-->
                  <!--<div class="progress xs">-->
                    <!--<div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar" aria-valuenow="20"-->
                         <!--aria-valuemin="0" aria-valuemax="100">-->
                      <!--<span class="sr-only">60% Complete</span>-->
                    <!--</div>-->
                  <!--</div>-->
                <!--</a>-->
              <!--</li>-->
              <!--&lt;!&ndash; end task item &ndash;&gt;-->
              <!--<li>&lt;!&ndash; Task item &ndash;&gt;-->
                <!--<a href="#">-->
                  <!--<h3>-->
                    <!--Make beautiful transitions-->
                    <!--<small class="pull-right">80%</small>-->
                  <!--</h3>-->
                  <!--<div class="progress xs">-->
                    <!--<div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar"-->
                         <!--aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">-->
                      <!--<span class="sr-only">80% Complete</span>-->
                    <!--</div>-->
                  <!--</div>-->
                <!--</a>-->
              <!--</li>-->
              <!--&lt;!&ndash; end task item &ndash;&gt;-->
            <!--</ul>-->
          <!--</li>-->
          <!--<li class="footer">-->
            <!--<a href="#">View all tasks</a>-->
          <!--</li>-->
        <!--</ul>-->
      <!--</li>-->
      <!-- User Account: style can be found in dropdown.less -->
      <li class="dropdown user user-menu">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          <img src="@/assets/user.jpg" class="user-image" alt="User Image">
          <span class="hidden-xs">{{userInfo}}</span>
        </a>
        <ul class="dropdown-menu">
          <!-- User image -->
          <li class="user-header" style="background-color: #409EFF">
            <img src="@/assets/user.jpg" class="img-circle" alt="User Image">

            <p>
              {{userInfo}}
            </p>
          </li>
          <!-- Menu Footer-->
          <li class="user-footer">
            <div class="pull-left">
              <!--data-toggle="modal" data-target="#pwdModal"-->
              <a class="btn btn-default btn-flat" @click="statusQuery('block')">修改密码</a>
            </div>
            <div class="pull-right">
              <a href="#" class="btn btn-default btn-flat" @click="loginOut">退出</a>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
  import {delCookie,getCookie} from "../../js/common/util";
  import instance from '@/api/index.js'
  export default {
    name: "LoginUser",
    data(){
      return{
        userInfo:"",//用户信息
      }
    },
    methods: {
      statusQuery(msg){
        this.$emit('commited', msg);
      },
       //获取用户信息
      getUserInfo:function(){
        let vm = this;
        vm.userInfo=getCookie("userName");
      },

      //退出登入
      loginOut: function () {
        delCookie("token");
        delCookie("userName");
        delCookie("userId");
        this.$router.replace({path: '/login'});
      }
    },
    created(){
      //获取用户信息
      this.$nextTick(function () {
        this.getUserInfo();
      })
    }
  }
</script>

<style scoped lang="less">
 .navbar-custom-menu{
   .navbar-nav{
     .dropdown{
       .dropdown-toggle{
         color: #333;
         &:hover{
           color: #333;
         }
       }
     }
   }
 }
</style>
